import React from 'react';
import { Layout } from 'antd';
import DocumentTitle from 'react-document-title';
import isEqual from 'lodash/isEqual';
import memoizeOne from 'memoize-one';
import { connect } from 'umi';
import { ContainerQuery } from 'react-container-query';
import classNames from 'classnames';
import pathToRegexp from 'path-to-regexp';
import Media from 'react-media';
import { formatMessage } from 'umi';
import Header from './Header';
import Footer from './Footer';
import logo from '../assets/logo.png';
import styles from './BasicLayout.less';
import Context from './MenuContext';

const { Content } = Layout;

const query = {};

class SimpleBasicLayout extends React.PureComponent {
    constructor(props) {
        super(props);
        this.getPageTitle = memoizeOne(this.getPageTitle);
        this.matchParamsPath = memoizeOne(this.matchParamsPath, isEqual);
    }

    getContext() {
        const { location, breadcrumbNameMap } = this.props;
        return {
            location,
            breadcrumbNameMap
        };
    }

    matchParamsPath = (pathname, breadcrumbNameMap) => {
        const pathKey = Object.keys(breadcrumbNameMap).find(key => pathToRegexp(key).test(pathname));
        return breadcrumbNameMap[pathKey];
    };

    getPageTitle = (pathname, breadcrumbNameMap) => {
        const currRouterData = this.matchParamsPath(pathname, breadcrumbNameMap);

        if (!currRouterData) {
            return '微微科技集团管理系统';
        }
        const pageName = formatMessage({
            id: currRouterData.locale || currRouterData.name,
            defaultMessage: currRouterData.name
        });

        return `${pageName} - 微微科技集团管理系统`;
    };

    getLayoutStyle = () => {
        const { fixSiderbar, isMobile, collapsed, layout } = this.props;
        if (fixSiderbar && layout !== 'topmenu' && !isMobile) {
            return {
                paddingLeft: collapsed ? '80px' : '256px'
            };
        }
        return null;
    };

    render() {
        const {
            children,
            isMobile,
            breadcrumbNameMap,
            location: { pathname },
            fixedHeader
        } = this.props;
        const contentStyle = !fixedHeader ? { paddingTop: 0 } : {};
        const layout = (
            <Layout
                style={{
                    ...this.getLayoutStyle(),
                    minHeight: '100vh'
                }}
            >
                <Header logo={logo} isMobile={isMobile} menuData={[]} hideGlobalHeader {...this.props} />
                <Content className={styles.content} style={contentStyle}>
                    {children}
                </Content>
                <Footer />
            </Layout>
        );
        return (
            <React.Fragment>
                <DocumentTitle title={this.getPageTitle(pathname, breadcrumbNameMap)}>
                    <ContainerQuery query={query}>
                        {params => (
                            <Context.Provider value={this.getContext()}>
                                <div className={classNames(params)}>{layout}</div>
                            </Context.Provider>
                        )}
                    </ContainerQuery>
                </DocumentTitle>
            </React.Fragment>
        );
    }
}

export default connect(({ setting, menu }) => ({
    layout: setting.layout,
    breadcrumbNameMap: menu.breadcrumbNameMap,
    ...setting
}))(props => (
    <Media query="(max-width: 1px)">{isMobile => <SimpleBasicLayout {...props} isMobile={isMobile} />}</Media>
));
